<template>
  <div class="card" v-bind:class="{done: isDone}">
     <div class="card-header">
      <a href="#">
        <span class="card-title" @click="edit(index)">{{item.title}}</span>
      </a>
      <input name="check" type="checkbox" @click="isDone=!isDone"/>
    </div>
    <div v-show="item.content!=''" class="card-content">
      <div class="card-content-inner">{{item.content}}</div>
    </div>
    <div class="card-footer"> 
      <span class="date">{{item.date}}</span>
      <a><span class="icon icon-remove" @click="delItem()">删除</span></a>
    </div>
  </div>
</template>

<script>
    import bus from './../bus.js'
    export default {
        props: ["item","index"],
        data() {
            return {
                isDone: false
            }
        },
        methods: {
            delItem: function() {
                bus.$emit('delete-todo', this.index);
               
            },
            edit: function() {
                let tempitem ={
                    index:this.index,
                    item:this.item
                }
                bus.$emit("edit-item",tempitem);
            }
        }
    }
</script>

<style>
    .card {
        background: #fff;
        box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, .3);
        margin: .5rem;
        position: relative;
        border-radius: .1rem;
        font-size: .7rem;
    }
    
    .card-footer,
    .card-header {
        border-radius: .1rem .1rem 0 0;
        font-size: .85rem;
        min-height: 2.2rem;
        position: relative;
        padding: .5rem .75rem;
        box-sizing: border-box;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        border-bottom: 1px solid #e1e1e1
    }
    
    .card-content-inner {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: .75rem;
        position: relative;
        border-bottom: 1px solid #e1e1e1
    }
    
    .card-title {
        color: #333;
        font-weight: bold;
    }
    
    .date {
        font-size: 0.5rem;
    }
    
    .done {
        color: #CCC;
    }
    
    .done .card-title {
        color: #CCC;
        text-decoration: line-through;
        text-decoration-color: #999;
        -moz-text-decoration-color: #999;
    }
</style>